<style lang="less">
	page{
		background: #f6f6f6;
		padding-bottom: 40upx;
	}
	.main-top{
		background: #FFFFFF;
		box-sizing: border-box;
		position: relative;
		text-align: center;
		.bj{
			display: block;
			width: 100%;
		}
		.main-top-pos{
			position: absolute;
			top: 50upx;
			left: 0;
			width: 100%;
			.money-info-top{
				display: flex;
				justify-content: space-between;
				padding: 0 50upx;
				align-items:center;
				.money-info-top-fl{
					display: flex;
					.touxiang{
						width: 100upx;
						border-radius: 50%;
					}
					.name-info{
						margin-left: 10upx;
						overflow: hidden;
						.name{
							font-size:30upx;
							font-weight:bold;
							color:rgba(51,51,51,1);
							line-height:36upx;
							margin-top: 10upx;
							text-align: left;
						}
						.vipclass{
							border: 1upx solid #000000;
							border-radius: 18upx;
							font-size: 20upx;
							font-weight: bold;
							color: #000000;
							line-height: 36upx;
							padding: 0 20upx;
							float: left;
							margin-top: 20upx;
						}
					}
				}
				.money-info-top-fr.tes{
					position: relative;
				}
				.money-info-top-fr{
					.dj-xia{
						font-size:20upx;
						font-weight:500;
						color:rgba(150,126,70,1);
						line-height:36upx;
						margin-top: 10upx;
					}
					.progress-pos{
						position: relative;
						progress{
							border-radius: 22upx;
							width: 260upx;
							overflow: hidden;
						}
						.progress-meber{
							position: absolute;
							left: 20upx;
							top: 0;
							font-size:24upx;
							font-family:'DINCond';
							font-weight:400;
							color:#333333;
							line-height:44upx;
						}
					}
					.zuigao{
						width: 214upx;
						height: auto;
						margin-right: -20upx;
					}
					.jibie{
						position: absolute;
						left: 80upx;
						font-size:28upx;
						top: 0;
						font-weight:bold;
						line-height: 70upx;
						color:rgba(51,51,51,1);
					}
				}
			}
			.bj_border{
				display: block;
				width: 690upx;
				margin: 0 auto;
				background:rgba(150,126,71,0.5);
				opacity:0.5;
				height: 2upx;
				margin-top: 40upx;
			}
			.money-info{
				display: flex;
				justify-content: space-around;
				 align-items:center;
				 margin-top: 40upx;
				 padding:0 60upx;
				.money-info-cn{
					width:1upx;
					height:60upx;
					background:rgba(150,126,71,1);
					opacity:0.5;
				}
				.jine{
					font-size:40upx;
					font-family:'DINCond';
					font-weight:400;
					line-height:48upx;
					margin-bottom: 10upx;
				}
				text{
					font-size:24upx;
					display: block;
					color:rgba(150,126,71,1);
				}
			}
		}
	}
	.main-list{
		margin-top: 20upx;
		background: #FFFFFF;
	}
	.main-info .main-list:nth-child(1){
		margin:0;
	}
	.main-list-title{
		display: flex;
		justify-content: space-between;
		padding: 0 30upx;
		.main-list-title-fl{
			font-size:30upx;
			font-weight:bold;
			color:rgba(51,51,51,1);
			line-height:90upx;
		}
		.main-list-title-fl.tes{
			padding-right: 38upx;
			background: url('https://static.xpandago.net/wechat/images/tc_tipicon%402x.png') no-repeat right center;
			background-size: 26upx;
		}
		.main-list-title-fr{
			font-size:22upx;
			font-weight:500;
			color:rgba(153,153,153,1);
			line-height:90upx;
			display: flex;
			align-items:center;
			.tiaozhuan{
				height: auto;
				width: 40upx;
			}
		}
	}
	.main-list-title.list{
		border-top: 1upx solid #ededed;
	}
	.main-list-title.list:first-child{
		border-top: none;
	}
	.main-list-cen{
		text-align: center;
		border-top: 1upx solid rgba(237,237,237,1);
		.main-list-cen-top{
			display: flex;
			.main-list-cen-list{
				width: 50%;
				border-left: 1upx solid rgba(237,237,237,1);
				box-sizing: border-box;
				padding: 20upx 0;
				.num{
					font-size:40upx;
					font-family:'DINCond';
					font-weight:400;
					color:rgba(218,193,145,1);
					line-height:48upx;
				}
				.name{
					font-size:24upx;
					color:rgba(218,193,145,1);
					line-height:29upx;
					margin-top: 10upx;
				}
			}
			.main-list-cen-list:nth-child(1){
				border-left:none;
			}
		}
		.main-list-cen-top.tes{
			.main-list-cen-list{
				width: 33.33%;
			}
		}
		.main-list-cen-bot{
			display: flex;
			justify-content: space-between;
			flex-wrap:wrap;
			.main-list-cen-for{
				width: 25%;
				padding: 30upx 0;
				box-sizing: border-box;
				border: 1upx solid rgba(237,237,237,1);
				border-collapse:collapse; 
				.num{
					font-size:40upx;
					font-family:'DINCond';
					font-weight:400;
					color:rgba(51,51,51,1);
					line-height:48upx;
				}
				.name{
					font-size:24upx;
					color:rgba(51,51,51,1);
					line-height:29upx;
					margin-top: 10upx;
				}
			}
			// .main-list-cen-for:nth-child(1){
			// 	border-left:none;
			// }
		}
	}
</style>
<template>
	<view>
		<view class="main-top">
			<image src="/static/img/wdfs_bgpics.png" class="bj" mode="widthFix"></image>
			<!-- <image src="/static/img/tdyj.png" class="bj" mode="widthFix"></image> -->
			<view class="main-top-pos">
				<view class="money-info-top">
					<view class="money-info-top-fl">
						<image v-if="user.headIco!='' && user.headIco!=null && user.headIco!=undefined" :src= "'https://static.xpandago.net'+'/'+user.headIco" class="touxiang" mode="widthFix"></image>
						<image v-else src='https://static.xpandago.net/wechat/images/logo.png' class="touxiang" mode="widthFix"></image>
						<view class="name-info">
							<view class="name">{{user.username}}</view>
							<view v-if="user.memberChinese!='' && user.memberChinese!=null && user.memberChinese!=undefined" class="vipclass">{{user.memberChinese}}</view>
							<!-- <image v-if="user.memberImage!='' && user.memberImage!=null && user.memberImage!=undefined" :src= "'https://static.xpandago.net'+'/'+user.memberImage" class="vipclass" mode="widthFix"></image> -->
						</view>
					</view>
					<!-- <view class="money-info-top-fr" v-if="user.memberType != 'big'">
						<view class="progress-pos">
							<progress :percent="percentage" activeColor="#FFFFFF" stroke-width="22" backgroundColor="rgba(255,255,255,0.4)"/>
							<view class="progress-meber">¥ {{promotionAmount}} / ¥ {{promotionNeedAmount}}</view>
						</view>
						<view class="dj-xia">累计业绩</view>
					</view>
					<view class="money-info-top-fr tes" v-else-if="user.memberType === 'big'">
						<image src="/static/img/level_hignest@2x.png" class="zuigao" mode="widthFix"></image>
						<view class="jibie">最高级别</view>
					</view> -->
				</view>
				<!-- <view class="bj_border"></view>
				<view class="money-info">
					<view class="money-info-fl">
						<text class="jine">{{user.teamSum1}}</text>
						<text>当前团队业绩</text>
					</view>
					<view class="money-info-cn">
					</view>
					<view class="money-info-fr">
						<text class="jine">{{user.teamSum2}}</text>
						<text>上月团队业绩</text>
					</view>
				</view> -->
			</view>
		</view>
		<view class="main-info">
			<!-- <view class="main-list">
				<view class="main-list-title">
					<view class="main-list-title-fl">个人业绩</view>
				</view>
				<view class="main-list-cen">
					<view class="main-list-cen-top">
						<view class="main-list-cen-list">
							<view class="num">{{user.promotionAmountCurrent}}</view>
							<view class="name">当前个人业绩</view>
						</view>
						<view class="main-list-cen-list">
							<view class="num">{{user.promotionAmountLast}}</view>
							<view class="name">上月个人业绩</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="main-list">
				<view class="main-list-title">
					<view class="main-list-title-fl">销售额</view>
				</view>
				<view class="main-list-cen">
					<view class="main-list-cen-top">
						<view class="main-list-cen-list">
							<view class="num">{{user.businessCurrent}}</view>
							<view class="name">本月团队销售额</view>
						</view>
						<view class="main-list-cen-list">
							<view class="num">{{user.businessLast}}</view>
							<view class="name">上月团队销售额</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="main-list">
				<view class="main-list-title">
					<view class="main-list-title-fl">直属团队业绩</view>
					<view class="main-list-title-fr" @tap="zsInfo">历史业绩 ></view>
				</view>
				<view class="main-list-cen">
					<view class="main-list-cen-fl">
						<view class="num">{{noBig.team}}</view>
						<view class="name">{{noBig.name}}</view>
					</view>
					<view class="main-list-cen-fr">
						<view class="main-list-cen-for" v-for="(itme,i) in noBig.classList">
							<view class="num">{{itme.team}}</view>
							<view class="name">{{itme.name}}</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="main-list">
				<view class="main-list-title">
					<view class="main-list-title-fl tes" @tap="tapTishi">总业绩</view>
					<view class="main-list-title-fr" @tap="ztdInfo">历史业绩 ></view>
				</view>
				<view class="main-list-cen">
					<view class="main-list-cen-top tes" @tap="ztdInfo">
						<view class="main-list-cen-list">
							<view class="num">{{user.teamSum1}}</view>
							<view class="name">当前总业绩</view>
						</view>
						<view class="main-list-cen-list">
							<view class="num">{{user.teamSum2}}</view>
							<view class="name">上月总业绩</view>
						</view>
						<view class="main-list-cen-list">
							<view class="num">{{user.teamSum3}}</view>
							<view class="name">团队推广津贴</view>
						</view>
						<view class="main-list-cen-list">
							<view class="num">{{atllPrice}}</view>
							<view class="name">团队经营奖</view>
						</view>
					</view>
					<view class="main-list-cen-bot">
						<view class="main-list-cen-for"  v-for="(itme,i) in ratioList">
							<view class="num">{{itme.team}}</view>
							<view class="name">{{itme.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="main-list">
				<view class="main-list-title">
					<view class="main-list-title-fl">额外奖</view>
				</view>
				<view class="main-list-cen">
					<view class="main-list-cen-top tes">
						<view class="main-list-cen-list">
							<view class="num">{{user.tjPrice}}</view>
							<view class="name">推荐奖</view>
						</view>
						<view class="main-list-cen-list">
							<view class="num">{{user.ycPrice}}</view>
							<view class="name">育成奖</view>
						</view>
						<view class="main-list-cen-list">
							<view class="num">{{user.gxPrice}}</view>
							<view class="name">特殊贡献就</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="main-list">
				<view class="main-list-title list" @tap="rank(1)">
					<view class="main-list-title-fl">销售额排行榜</view>
					<view class="main-list-title-fr">
						<image src='/static/img/arrow-right@2x.png' class="tiaozhuan" mode="widthFix"></image>
					</view>
				</view>
				<view class="main-list-title list" @tap="rank(0)">
					<view class="main-list-title-fl">总业绩排行榜</view>
					<view class="main-list-title-fr">
						<image src='/static/img/arrow-right@2x.png' class="tiaozhuan" mode="widthFix"></image>
					</view>
				</view>
				<view class="main-list-title list" @tap="rankPage">
					<view class="main-list-title-fl">总业绩详情</view>
					<view class="main-list-title-fr">
						<image src='/static/img/arrow-right@2x.png' class="tiaozhuan" mode="widthFix"></image>
					</view>
				</view>
				<view class="main-list-title list" @tap="jumpBrand">
					<view class="main-list-title-fl">品牌销售排行榜</view>
					<view class="main-list-title-fr">
						<image src='/static/img/arrow-right@2x.png' class="tiaozhuan" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api';
	export default {
		data() {
			return {
				big:[],//团队
				user:{},
				ratioList:[],
				atllPrice:0.00,
				promotionAmount:'',//下个等级
				promotionNeedAmount:'',//下个等级金额
				percentage:0,//百分比
				token:''
			}
		},
		onLoad() {
			let token=this.getQueryVariable('token');
			this.token=uni.getStorageSync('token')
			
			// this.token='eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjo0MzU0OCwiZXhwIjoxNjM3ODI3NjI1fQ.N9Tf8SHl8yJ0Ol7Qzn5QsqwbvhRafpPr1abcvPaxQ5VRKDSK3B5LLa8_d3uInMNlbqSHuxz69Cs3Cv0iE4RvzA'
			
			let code=this.GetQueryString('code');
			var pages = getCurrentPages(); // 当前页面
			var beforePage = pages[pages.length - 1]; // 获取当前页面的对象
			var url = beforePage.route //当前页面url
			uni.setStorageSync('url', url);
			if(token!=false){
				uni.setStorageSync('token', token);
				this.token=token
				this.performance()
			}else if(this.token!=null && this.token !='' && this.token != undefined){
				this.performance();
			}else if(code!=null && code !='' && code != undefined){
				this.loginCode(code)
			}else{
				uni.showToast({
					title: '请先登录！',
					icon: 'none'
				})
				setTimeout(() => {
					uni.reLaunch({
					  url: "/pages/login/loginWechat"
					})
				}, 500);
			}
		},
		//下拉刷新
		 onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			this.performance()
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 1000);
		},
		methods: {
			jumpBrand(){
				uni.navigateTo({
				  url: "/pages/achievememtBrand/achievememtBrand"
				})
			},
			async loginCode(code){
				const [err, res] = await api.loginCode({
						query: {
							code:code
						}
					 });
				 console.log(res)
				 if(res.data.code == 0){
					 let token=res.data.data
					 this.token=token
					 uni.setStorageSync('token', token);
					 this.performance();
				 }else{
					uni.showToast({
					 	title: res.data.msg,
					 	icon: 'none'
					 })
					if(res.data.code==100){
						uni.removeStorageSync('token');
						setTimeout(() => {
							uni.reLaunch({
							  url: "/pages/login/loginWechat"
							})
						}, 300);
					}
				 }
			},
			//截取code
			GetQueryString(name){
			    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
			    var r = window.location.search.substr(1).match(reg);
			    if(r!=null)return  unescape(r[2]); return null;
			},
			//业绩信息
			async performance(){
				const [err, res] = await api.performance({
						header:{
							'Content-Type': 'application/json',
							'token': this.token
						}
					 });
				 if(res.data.code == 0){
					 this.user=res.data.data
					 if(this.user.memberType !='big'){
						 this.promotionAmount=res.data.data.promotionAmount
						 this.promotionNeedAmount=res.data.data.promotionNeedAmount
						 let percentageInfo=Number(this.promotionAmount)/Number(this.promotionNeedAmount)
						 this.percentage=percentageInfo*100
					 }
					 let atllPrice=Number(this.user.tjPrice)+Number(this.user.ycPrice)+Number(this.user.gxPrice)
					 this.atllPrice=atllPrice.toFixed(2)
					 let ratioList=this.user.ratioList
					 if(ratioList.length>4){
						 ratioList=this.user.ratioList.slice(0,4)
					 }
					 this.ratioList=ratioList
				 }else{
					 uni.showToast({
					  	title: res.data.msg,
					  	icon: 'none'
					  })
					 if(res.data.code==200){
					 	uni.removeStorageSync('token');
					 	setTimeout(() => {
					 		uni.reLaunch({
					 		  url: "/pages/login/loginWechat"
					 		})
					 	}, 1000);
					 }
				 }
			},
			tapTishi(){
				let centent='当前团队业绩，团队推广津贴，团队经营奖等数据为1小时更新1次，与最终实际发放金额可能有一定差别，请以最终实际奖金为准'
				uni.showModal({
				  title: '提示',
				  content: centent,
				  showCancel: false, // 是否显示取消按钮
				  success: function(res) {
				    if (res.confirm) {
				        // 确定按钮
				        // console.log(id)
				    } else if (res.cancel) {
				    }
				  }
				})
			},
			//跳转到团队业绩详情
			rankPage(){
				uni.navigateTo({
				  url: "/pages/achievememtInfoGr/achievememtInfoGr"
				})
			},
			//跳转到我的团队业绩详情
			zsInfo(){
				uni.navigateTo({
				  url: "/pages/achievememtInfo/achievememtInfo"
				})
			},
			//跳转到总团队业绩详情
			ztdInfo(){
				uni.navigateTo({
				  url: "/pages/achievememtInfoZtd/achievememtInfoZtd"
				})
			},
			//获取token与id
			getQueryVariable(variable)
			{
				   var query = window.location.search.substring(1);
				   var vars = query.split("&");
				   for (var i=0;i<vars.length;i++) {
						   var pair = vars[i].split("=");
						   if(pair[0] == variable){return pair[1];}
				   }
				   return(false);
			},
			//跳转到排行榜
			rank(moneyType){
				uni.navigateTo({
				  url: "/pages/achievememtRank/achievememtRank?moneyType="+moneyType
				})
			}
		}
	}
</script>
